import config from "../../config";
import position from "../../service/position";

/**
 * 抽象类
 */
export default abstract class AbstractCanvas {

    // 元素实例：模型,元素碰撞需要取用，所以为public
    public models: IModel[] = []

    //构造函数渲染
    constructor(
        protected name: string,
        protected app = document.querySelector('#app') as HTMLDivElement,
        // @ts-ignore
        protected el = document.createElement<HTMLCanvasElement>('canvas')!,
        // @ts-ignore
        public ctx = el.getContext('2d')!
    ) {
        this.createCanvas()
    }

    // 抽象方法:渲染贴图
    abstract render(): void

    // 抽象方法，返回模型
    abstract model(): ConstructorModel | ConstructorModelBullet

    // 抽象方法：返回模型数量
    abstract num(): number

    // 画布移除模型
    public removeModel(model: IModel): void {
        this.models = this.models.filter(mItem => mItem != model)
    }

    // 绘制模型,生成模型实例，只负责创建实例
    // protected:子类可以调用，外部不能调用
    //num: 渲染多少个数量
    // 初始化canvas,创建画布
    protected createCanvas() {
        // 元素的宽高就是全局canvas得到宽高
        // @ts-ignore
        this.el.width = config.canvas.width
        // @ts-ignore
        this.el.height = config.canvas.height

        // 测试画布
        // 定义填充颜色
        // this.canvas.fillStyle = '#16a085'
        // 绘制矩形
        // this.canvas.fillRect(0, 0, config.canvas.width, config.canvas.height)

        // 最终元素要放到我们的app的div中
        // @ts-ignore
        this.el.setAttribute('name', this.name)
        // @ts-ignore
        this.app.insertAdjacentElement('afterbegin', this.el)
        // @ts-ignore
        if (!(this.name === 'water' || this.name === 'WallSteel')) {
            // @ts-ignore
            this.app.appendChild(this.el)
        }
    }

    //model: 模型
    protected createModels() {
        position.getPositionCollection(this.num()).forEach((position) => {
            const model = this.model() as ConstructorModel
            const instance = new model(position.x, position.y)
            this.models.push(instance)
            // this.canvas.drawImage(
            //     image.get('straw')!,
            //     position.x,
            //     position.y,
            //     config.model.common.width,
            //     config.model.common.height
            // );
        })
        // Array(num).fill('').forEach(() => {
        //     const position = this.position()
        //     this.canvas.drawImage(
        //         image.get('straw')!,
        //         position.x,
        //         position.y,
        //         config.model.common.width,
        //         config.model.common.height
        //     );
        // })

        // const img = document.createElement('img')
        // img.src = imgUrl;
        // //图片是异步加载，所以需要将图片加载完毕后，才进行渲染绘制
        // img.onload = () => {
        //     const position = this.position()
        //     this.canvas.drawImage(img, position.x, position.y, config.model.common.width, config.model.common.height);
        // }
    }

    // 画布渲染模型（将模型渲染到画布上）。public：模型需要主动渲染画布时需要调用，所以public
    public renderModels() {
        // 画布清理
        this.ctx.clearRect(0, 0, config.canvas.width, config.canvas.height)
        this.models.forEach(model => model.render())
    }
}
